 <template>
  <div class="homedonation">
    <div class="header">
      <x-header :left-options="{backText: ''}" @on-click-more="showMenus = true">邀朋友一起捐</x-header>
      <div class="erweima" @click="showAlert = true"><i class="iconfont icon-wodeerweima"></i></div>
    </div>
     <div class="comdonation">
        <img src="../../images/homedonationlove.png"/>
        <img :src="obj.headUrl" class="people"/>
        <p v-if="obj.mingcheng && obj.mingcheng != ''" class="objName">{{obj.mingcheng}}</p>
        <p v-else class="objName">{{obj.name}}</p>
        <p class="objText">邀您一起献爱心</p>
        <p v-show="obj.mingcheng && obj.mingcheng != ''" class="objPeopleName">{{obj.name}} 代表发起</p>
        <div v-html="obj.contents"></div>

     </div>
    <div v-transfer-dom>
      <alert v-model="showAlert" :title="titleAlert" @on-show="onShow" @on-hide="onHide" content="1" button-text="确定">
        <!--<qrcode :value="qrcodeImg" type="img"></qrcode>-->
        <vue-qr :logoSrc="logoSrc" :text="qrcodeImg" height="200" width="200" :margin="margin" colorDark="#333333" colorLight="#333333" :dotScale="dotScale" :logoMargin="logoMargin" :logoCornerRadius="logoCornerRadius"></vue-qr>
      </alert>
    </div>

     <div class="donation-project">
       <div class="nationMiddle">
         <p><span style="float: left"> <span class="colorRed">{{obj.people}}</span>人&nbsp;&nbsp;&nbsp;&nbsp;<span v-on:click="togetherRecord" style="color: #1AAC19;font-size: 14px;text-decoration:none">查看</span></span> <span style="float: right"><span class="colorRed">{{obj.amount}}</span>元</span></p>
         <p><span style="float: left">参与人数</span> <span style="float: right">捐款金额</span></p>
         <p v-if="obj.goalAmount != 0" style="text-align: left;margin-top: 10px">一起捐目标：<span class="colorRed">{{obj.goalAmount}}</span>元</p>
         <p v-else="" style="text-align: left;margin-top: 10px">一起捐目标：<span class="colorRed">不设金额</span></p>
       </div>
       <div>
         <flexbox style="background-color: #FFFFFF;">
           <flexbox-item :span="4">
             <div class="item-image">
               <img :src="imageUrl.imageUrl + obj.eventPicUrl" alt="">
             </div>
             <p class="lookall">&nbsp;</p>
           </flexbox-item>
           <flexbox-item :span="8">
             <h3 class="item-title" v-html="obj.eventName"></h3>
             <div class="item-mujuan">
               <span>已筹</span><em>{{obj.raiseMoney}}</em><span>元</span>
             </div>
             <p class="lookall" @click="goProject">查看详情</p>
           </flexbox-item>
         </flexbox>
       </div>
       <img class="logo" src="../../images/find-log.png" alt="">
     </div>
     <div class="donation-foot" ref="donationFoot" style="display: none">
         <ul v-if="obj.eventStatus == 1 && parseFloat(obj.raiseMoney) < obj.eventGoalAmount">
           <li class="foot-comeback" @click="primaryshow">我要捐款</li>
           <li class="foot-active" @click="finishInvitation">我要分享</li>
         </ul>
       <ul v-else>
         <li class="foot-one">该一起捐已结束</li>
       </ul>
     </div>
    <div class="popupa">
      <div v-transfer-dom>
        <popup v-model="showf" position="top">
          <div class="position-vertical-demo">
            点击右上角，邀请您的好友一起捐
            <i class="iconfont" style="font-size: 30px;float: right;line-height: 20px;color: #1AAC19;">&#xe635;</i>
          </div>
        </popup>
      </div>
    </div>

     <div v-transfer-dom>
          <confirm v-model="showConfirm"
          title=""
          show-cancel-button="false"
          confirm-text="捐出第一笔"
          cancel-text=""
          @on-cancel="onCancel"
          @on-confirm="onConfirm"
          @on-show="onShow"
          @on-hide="onHide">
            <p style="text-align:center;font-size:20px;">一起捐发起成功</p>
          </confirm>
        </div>

    <div class="popup">
      <div>
        <popup v-model="showj" :hide-on-blur=true>
          <div class="popup2">
            <group>
              <cell title="请输入捐款金额">
                <x-icon type="ios-close-empty" size="24" @click="isShow"></x-icon>
              </cell>
            </group>
            <checker
              style="padding-top: 10px"
              v-model="demo"
              default-item-class="demo5-item"
              selected-item-class="itemselected"
              :radio-required="true"
            >
              <checker-item v-for="i in [10, 20, 50, 100, 1000]"  :value="i">{{i}}元</checker-item>
              <checker-item class="qitajine" :value="textMoney" v-bind:class="{ itemselected: ifselected}">
                <input type="text" @keyup="keyups" @blur="blurs"  placeholder="其他金额" style="width: 66%;height: 73%;border: none;" v-model="textMoney">
              </checker-item>
            </checker>
            <x-button type="primary" @click.native="primary">立刻捐款</x-button>
            <div>
              <input type="checkbox" value="" v-model="checkOK"  style="margin-bottom: 2px">
              <span style="color: #999999;font-size: 14px">同意并接受</span>
              <em style="font-size: 14px">《亲青筹用户协议》</em>
            </div>
            <!--适应苹果手机-->
            <div style="width: 100%;height: 20px"> </div>
          </div>
        </popup>
      </div>
    </div>
  </div>
</template>
<style lang="scss" src="./index.scss"></style>
<script src="./homedonation.js"></script>
